<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tooltips{

            display:inline-block;

            width:100px;

            padding:3px 10px;

            border:1px solid #d9d9d9;

            position:relative; }

        .tooltips:hover:before,.tooltips:hover:after{

            opacity:1;

        }

        .tooltips:before,.tooltips:after{

            -webkit-transition:all .4s;

            transition:all .4s;

            opacity:0;

        }

        .tooltip1:before{

            position:absolute;

            content:'';

            top:100%;

            left:50%;

            border-top: 5px solid transparent;

            border-right: 5px solid transparent;

            border-bottom: 5px solid rgba(0,0,0,.5);

            border-left: 5px solid transparent;

            -webkit-transform:translate(-50%,-5px);

            transform:translate(-50%,-5px);

        }

        .tooltip1:after{

            content:attr(data-tip);   //注意这里

        position:absolute;

            top:100%;

            left:50%;

            padding:3px 10px;

            background:rgba(0,0,0,.5);

            color:#fff;

            white-space:nowrap;

            -webkit-transform:translate(-50%,5px);

            transform:translate(-50%,5px);

        }


    </style>
</head>
<body>
<div class="tooltip1 tooltips" data-tip="哈哈，我是tooltip">这里！这里！</div>

</body>
</html>